<template>
    <div>
        <el-card>
        <!--查询添加-->
            <el-row>
                <el-col :span="8">
                    <el-input placeholder="请输入内容" clearable v-model="queryString" class="input-with-select" @clear="findPage">
                       <el-button slot="append" icon="el-icon-search" @click="findPage"/>
                    </el-input>
                </el-col>
            </el-row>
            <!--列表-->
            <el-table :data="tableList" stripe  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"  row-key="id" >
                  <el-table-column type="index" label="序号" />
                  <el-table-column prop="id" label="评论id" show-overflow-tooltip/>
                  <el-table-column prop="content" label="评论内容" />
                  <el-table-column prop="nickName" label="创建人" />
                  <el-table-column prop="time" label="创建时间" />
                  <el-table-column prop="target" label="目标用户名" />
                  <el-table-column label="审核状态">
                      <template slot-scope="scope">
                          <el-switch @change="updateStatus(scope.row)" v-model="scope.row.status" />
                      </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="180">
                    <template slot-scope="scope">
                          <el-button type="danger" @click="deleteById(scope.row.id)"   size="small"  icon="el-icon-delete" circle/>
                    </template>
                  </el-table-column>
            </el-table>
          <!--底部分页条-->
            <el-pagination
              @size-change="handlePageSize"
              @current-change="handlePageNumber"
              :current-page="currentPage4"
              :page-sizes="[7, 25, 50, 100]"
              :page-size="queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"/>
        </el-card>
    </div>
</template>

<script>
import {marked} from "marked";
export default {
    data(){
        return {
            queryInfo: {
              //页码
              pageNumber: 1,
              //页数
              pageSize: 7,
              //关键字
              queryString: ""
            },
            queryString:"",
            //表格数据
            tableList:[],
            //总记录数
            total: 0,
            currentPage4: 1
        }
    },
    methods:{
          //查询
          findPage(){
              if(this.queryString == ""){
                this.queryInfo.queryString = "course::"+"test";
              }else{
                this.queryInfo.queryString = "course::"+this.queryString;
              }
              this.$ajax.post("/comment/findAllComment", this.queryInfo).then((res)=>{
                  this.tableList = res.data.rows;
                  this.total = res.data.total;
              });
          },

          //分页
          //页面改变事件
          handlePageNumber(newPageNumber){
            //将分页的新数据的参数传递给后端查询
            this.queryInfo.pageNumber = newPageNumber;
            //调分页方法
            this.findPage();
          },
          handlePageSize(newPageSize){
            this.queryInfo.pageSize = newPageSize;
            this.findPage();
          },

          //删除
          //删除权限信息
          deleteById(id){
            this.$confirm('您将永久删除id是{' + id +' }的新闻资讯, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              //调用后端删除权限接口
              this.$ajax.delete(`/comment/delete/${id}`).then(res => {
                this.$message.success(res.data.message);
                this.queryInfo.pageNumber = 1;
                this.findPage();
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },

          //审核
          /*改变审核的状态*/
          updateStatus(row){
              this.$ajax.put(`/comment/updateStatus/${row.id}`).then((res)=>{
                  this.$message.success("状态更新成功！")
              })
          },
        },
        created(){
            this.findPage();
        }
}
</script>

<style>

</style>